﻿<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>imageLister for jQuery</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script src="../jquery.imageLister.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('#imageList').imageLister();
	});
	</script>
	<style type="text/css">
		a { outline: 0; }
		ul.ilContainer {
			list-style: none;
			margin: 0 auto;
			padding: 0;
			position: relative;
			overflow: hidden;
			width: 540px;
		}
		ul.ilContainer li {
			float: left;
			display: block;
			position: relative;
			margin-right: 10px;
			margin-bottom: 10px;
			overflow: hidden;
		}
		ul.ilContainer li a {
			display: block;
		}
		ul.ilContainer li img {
			border: 0;
			position: absolute;
			z-index: 5;
		}
		ul.ilContainer li span {
			display: block;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 0;
		}
	</style>
</head>
<body>
<div id="imageList">
	<a href="photos/image1.jpg" title="Resim 2"><img src="photos/image1_thumb.jpg" /></a>
	<a href="photos/image2.jpg" title="Resim 1"><img src="photos/image2_thumb.jpg" /></a>
	<a href="photos/image3.jpg" title="Resim 3"><img src="photos/image3_thumb.jpg" /></a>
	<a href="photos/image4.jpg" title="Resim 1"><img src="photos/image4_thumb.jpg" /></a>
	<a href="photos/image5.jpg" title="Resim 2"><img src="photos/image5_thumb.jpg" /></a>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-8220477-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>